<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的活动</title>
    <!-- 使用国内CDN加速 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #eee;
        }

        .page-title {
            color: #333;
            margin: 0;
            font-size: 24px;
            font-weight: bold;
        }

        .page-title i {
            color: #3399ff;
            margin-right: 10px;
        }

        .refresh-btn {
            background-color: #3399ff;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .refresh-btn:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
        }

        .table-responsive {
            margin-top: 20px;
        }

        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin-bottom: 20px;
        }

        th {
            background-color: #3399ff;
            color: white;
            font-weight: 500;
            padding: 15px;
            text-align: left;
        }

        td {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        tr:hover {
            background-color: #f8f9fa;
            transition: all 0.3s ease;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
        }

        .action-btn {
            padding: 6px 12px;
            border-radius: 5px;
            text-decoration: none;
            color: white;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .detail-btn {
            background-color: #3399ff;
        }

        .sign-btn {
            background-color: #2ecc71;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            color: white;
            text-decoration: none;
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .empty-state i {
            font-size: 48px;
            color: #ddd;
            margin-bottom: 20px;
        }

        .status-badge {
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-pending {
            background-color: #ffeeba;
            color: #856404;
        }

        .status-completed {
            background-color: #d4edda;
            color: #155724;
        }

        @media (max-width: 768px) {
            .container {
                width: 95%;
                padding: 15px;
            }

            .action-buttons {
                flex-direction: column;
            }

            .action-btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1 class="page-title"><i class="fas fa-calendar-check"></i> 我的活动</h1>
        <button class="refresh-btn" onclick="location.reload()">
            <i class="fas fa-sync-alt"></i> 刷新
        </button>
    </div>

    <div class="table-responsive">
        <table>
            <thead>
            <tr>
                <th>活动编号</th>
                <th>活动名称</th>
                <th>报名时间</th>
<!--                <th>状态</th>-->
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:if="${#lists.isEmpty(orderList)}">
                <td colspan="5" class="empty-state">
                    <i class="fas fa-calendar-times"></i>
                    <p>暂无活动记录</p>
                </td>
            </tr>
            <tr th:each="order : ${orderList}">
                <td th:text="${order.getActivityId()}"></td>
                <td th:text="${order.getActivityName()}"></td>
                <td th:text="${#dates.format(order.getCreateTime(), 'yyyy-MM-dd HH:mm:ss')}"></td>
<!--                <td>-->
<!--                    <span class="status-badge" th:each="activity : ${activityList}" -->
<!--                         th:if="${activity != null && activity.activityName != null && order.activityName != null && activity.activityName == order.activityName}" -->
<!--                         th:classappend="${activity.activityState == 2 ? 'status-completed' : 'status-pending'}">-->
<!--                        <i th:class="${activity.activityState == 2 ? 'fas fa-check-circle' : 'fas fa-clock'}"></i>-->
<!--                        <span th:text="${activity.activityState == 2 ? '已完成' : '待签到'}"></span>-->
<!--                    </span>-->
<!--                </td>-->
                <td>
                    <div class="action-buttons">
                        <a th:href="@{'/toActivityDetail/'+${order.getActivityId()}}" class="action-btn detail-btn">
                            <i class="fas fa-info-circle"></i> 详情
                        </a>
                        <a th:href="@{/toSign(id=${order.getActivityId()})}" class="action-btn sign-btn">
                            <i class="fas fa-signature"></i> 签到
                        </a>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    // 添加页面加载动画
    $(document).ready(function() {
        $('tr').each(function(index) {
            $(this).delay(index * 100).fadeIn(500);
        });
    });
</script>
</body>
</html>